<template>
	<view class="home">
		<searchBar/>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="rgba(0, 0, 0, .3)"
		 indicator-active-color="#ffffff">
			<swiper-item class="swiper-item" v-for="(item,index) in swiperData" :key="index">
				<image class="img" :src="item.image_src" mode="aspectFill" lazy-load></image>
			</swiper-item>
		</swiper>
		<view class="category">
			<view class="category-item" v-for="(item,index) in categoryData" :key="index">
				<image class="img" :src="item.image_src" mode=""></image>
			</view>
		</view>
		<view class="floor">
			<view class="floor-item" v-for="(item,index) in floorData" :key="index">
				<image :src="item.floor_title.image_src" mode="widthFix"></image>
				<view class="product-list">
					<image :src="item.product_list[0].image_src" mode=""></image>
					<view class="right">
						<block v-for="(item2,index2) in item.product_list" :key="index2">
							<!-- 遍历是从下标0开始，0 == false  所以不显示第一个 -->
							<image v-if="index2" :src="item2.image_src" mode=""></image>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchBar from "../../components/searchBar.vue"
	export default {
		components:{
			searchBar
		},
		data() {
			return {
				swiperData: [],
				categoryData: [],
				floorData: []
			}
		},
		onLoad() {
			this.getSwiperData(),
			this.getCategoryData(),
			this.getFloorData()
		},
		methods: {
			// 轮播图数据
			async getSwiperData() {  
				this.swiperData = await this.$request({
					url:'/api/public/v1/home/swiperdata',
				})
			},
			// 导航数据
			async getCategoryData() {
				this.categoryData = await this.$request({
					url: '/api/public/v1/home/catitems'
				})
			},
			// 楼层数据
			async getFloorData() {
				this.floorData = await this.$request({
					url:'/api/public/v1/home/floordata'
				})
			},
		},
	}
</script>

<style lang="less">
	.home {
		.swiper {
			height: 340rpx;
			width: 100%;

			.img {
				width: 100%;
				height: 340rpx;
			}
		}

		.category {
			height: 194rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.category-item {
				padding: 0 20rpx;

				.img {
					height: 140rpx;
					width: 128rpx;
				}
			}
		}

		.floor-item {
			padding: 20rpx 17rpx;

			>image {
				width: 100%;
				height: 88rpx;
			}

			.product-list {
				display: flex;

				>image {
					width: 232rpx;
					height: 386rpx;
				}

				.right {
					flex: 1;

					image {
						width: 232rpx;
						height: 188rpx;
						margin: 0 0 10rpx 10rpx;
					}
				}
			}
		}
	}
</style>
